{% extends 'home/public/base.html' %}

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/home/public/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/home/public/css/cart-app.css">
{% endblock %}

{% block mbx %}
<div class="navbar-left">
	<ol class="breadcrumb">
		<li class="active">购物车</li>
		<li>确认订单</li>
		<li>在线支付</li>
		<li>完成 </li>
	</ol>
</div>

{% endblock %}

{% block con %}
<br><br><br><br>
<!-- 主内容区域 -->
    <div class="mainbody cart cart-app">
		<div class="container">
			<!-- 购物车详情头 -->
			<table class="cart-header">
				<tbody>
					<tr>
						<td class="cart-col-select col-md-3 col-xs-3 col-sm-3">
							<div class="cart-select-all JSelectAll">
								<div class="mz-checkbox"></div>
								<span class="cart-select-title">全选</span>
							</div>
						</td>
						<td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
						<td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
						<td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
						<td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
						<td class="cart-col-total col-md-1 hidden-xs hidden-sm">操作</td>
					</tr>
				</tbody>
			</table><!-- 购物车详情头 E-->
			
			<!-- 购物清单信息列表 -->
			<div class="cart-merchant-list">
				<div class="cart-merchant">
					<table class="cart-merchant-body">
						<tbody>
							{% for v in request.session.cart.values %}
							<tr class="cart-product" gid="{{ v.id }}">
								<td class="cart-col-select col-md-3 col-xs-4 col-sm-4">  
									<div class="mz-checkbox " gid="{{ v.id }}"></div> 
									<a href="{% url 'info' v.id %}" class="cart-product-link" target="_blank">
										<img src="{{ v.pic }}" class="cart-product-img" alt="{{ v.name }}">
									</a>
								</td>
								<td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
									<a href="{% url 'info' v.id %}" class="cart-product-link" target="_blank">
									  <p>{{ v.title }}</p>
									</a>
			<!-- 						<div class="cart-col-number">
										<div class="cart-product-number-adder">
											<p class="cart-product-number-max show"></p>
											<div class="mz-adder">
												<button class="mz-adder-subtract disabled"></button>
												<div class="mz-adder-num"><input class="mz-adder-input" value="1" type="text"></div>
												<button class="mz-adder-add"></button>
											</div>
										</div>
									</div> -->
								</td>
								<td class="cart-col-price col-md-2 hidden-xs hidden-sm">
									<p>
										<span class="cart-product-price" price="{{ v.price }}" >{{ v.price }}</span>
									</p>
								</td>
								<td class="cart-col-number col-md-2 hidden-xs hidden-sm">
									<div class="cart-product-number-adder">
										<p class="cart-product-number-max show"></p>
										<div class="mz-adder cartnum" gid="{{ v.id }}">
											<button class="mz-adder-subtract vm-minus"></button>
											<div class="mz-adder-num"><input class="mz-adder-input" value="{{ v.num }}" type="text" ></div>
											<button class="mz-adder-add vm-plus"></button>
										</div>
									</div>
								</td>
								{% load pagetag %}
								<td class="cart-col-total col-md-1 hidden-xs hidden-sm">
									<span class="cart-product-price total">{% cheng v.num v.price %}</span>
								</td>
								<td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">
									<div class="cart-product-remove">
										<span class="glyphicon glyphicon-remove"></span>
									</div>
								</td>
							</tr>
							{% endfor %}

						</tbody>
					</table>
				</div>
			</div><!-- 购物清单信息列表 E-->
		</div>
		<!-- 结算详情 -->
		<div class="cart-footer" id="cartFooter">
			<div class="container">
			   <div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
				   <div class="cart-select-all JSelectAll" data-mdesc="全选按钮" data-mtype="store_cart_all">
						<div class="mz-checkbox" checked></div>
						<span class="cart-select-title">全选</span>
				   </div>
				   <!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
				   <span class="cart-footer-count">
						共
						<span class="cart-footer-num" id="totalCount">0</span>
						件商品
				   </span>
				   <a class="mz-btn success"  href="{% url 'cartclear' %}">清空购物车</a>
				</div>
				<div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
					<span class="cart-footer-sum">
						<span class="cart-footer-text">已优惠</span>
						<span class="cart-footer-num red" id="totalDiscount">0.00</span>
						<span class="cart-footer-text">元， 合计(不含运费)：</span>
						<span class="cart-footer-total" id="totalPrice">0.00</span>
					</span>
					<div class="mz-btn success" id="cartSubmit">去结算</div>
				</div>
			</div>
		</div><!-- 结算详情 E-->
	</div>
    <!-- 主内容区域 E-->
{% endblock %}


{% block js %}
<script type="text/javascript">

//回顶部
backTop();
//顶部导航鼠标经过出现内容
topNav();
//登录图片鼠标经过
topLogin();

 // 数量增加减少
function addMin(){
	// 减少
	$('.vm-minus').click(function(){
		
	  var n=$(this).next().find('.mz-adder-input').val();
	  var num=parseInt(n)-1;
	  if (num<=1) 
	  	num = 1;
	  if(num<=1){ 
	    $('.vm-minus').addClass('disabled');
	    $(this).next().find('.mz-adder-input').val(1);
	  }else{
	    $('.vm-minus').removeClass('disabled');
	    $(this).next().find('.mz-adder-input').val(num);
	  }
	  
		// 获取当前商品id 
		var gid = $(this).parents('.cart-product').attr('gid')
		// 当前商品对象的总结标签
		var a = $(this)
		$.get('{% url "cartclearnumreduce" %}',{gid:gid,num:num},function(data){
			if(data['code']==0){
				// 计算成功,改变页面信息
				a.parents('.cart-product').find('.total').text(data['total']);
				totalPrice();
				
				// location.href=location.href
		
			}else{
				// 输出提示信息
				alert(data['msg'])
			}
		},'json');
	})
  //增加
	$('.vm-plus').click(function(){
		var n=$(this).prev().find('.mz-adder-input').val();
		var num=parseInt(n)+1;
		// if(num>=5)
		// 	num = 5;
		if(num>1){ $('.vm-minus').removeClass('disabled');}
		// if(num>5){ return;}
		$(this).prev().find('.mz-adder-input').val(num);

		// 获取当前商品id 
		var gid = $(this).parents('.cart-product').attr('gid')
		// 当前商品对象的总结标签
		var a = $(this)
		$.get('{% url "cartclearnumadd" %}',{gid:gid,num:num},function(data){
			if(data['code']==0){
				// 计算成功,改变页面信息
				a.parents('.cart-product').find('.total').text(data['total'])
				
				// location.href=location.href
				totalPrice();
		
			}else{
				// 输出提示信息
				alert(data['msg'])
			}
		},'json');
	});
}// 数量增加减少E

addMin();

// 删除购物车中的相应商品 (包括页面和session中的数据)
$('.glyphicon-remove').click(function(){
	// 获取当前商品id
	var gid = $(this).parents('.cart-product').attr('gid')
	var item =  $(this).parents('.cart-product')
	// 发送ajax
	$.get('{% url "cartlistdel" %}',{gid:gid},function(data){
		if(data['code'] == 0){
			// 删除页面中相应的商品
			item.remove()
			totalPrice();
		}
	},'json');
});



// 计算选中商品的总价
function totalPrice(){
	
}



//选择框操作
function allSelect(){
  var aee = false;
  var see = false;
  // 全选
  $('.JSelectAll .mz-checkbox').click(function(){
    if(aee==false){
      $(this).addClass('checked');
      $('.cart-col-select .mz-checkbox').addClass('checked');
      aee = true;
      totalPrice();

    }else if(aee==true){
      $(this).removeClass('checked');
      $('.cart-col-select .mz-checkbox').removeClass('checked');
      aee = false;
      totalPrice();
    }
  })

  //单选
  $('.cart-col-select .mz-checkbox').click(function(){
    if(see==false){
      $(this).addClass('checked');
      see = true;
      totalPrice();
      
    }else if(see==true){
      $(this).removeClass('checked');
      see = false;
      totalPrice();
    }
  })
}

allSelect();



// 商品总数计算
function totalPrice(){
	// 价格小计
	var total = 0;
	// 选中商品的id组成数组
	var ids =[];
	// 选中商品的个数
	var totalCount = 0;
	// 获取已经选择的元素
	
	$('.cart-merchant-body .checked').each(function(){
		p = $(this).parents('tr').find('.total').text();
		total += Number(p);

		c = $(this).parents('tr').find('.mz-adder-input').val();
		totalCount += Number(c);

		ids.push($(this).attr('gid'));
	});

	$('#totalPrice').text(total);
	$('#totalCount').text(totalCount);


	return ids;
}


// 去结算
$('#cartSubmit').click(function(){
	// 得到结算产品的id
	ids = totalPrice();
	if (ids.length == 0){
		alert('请选择购买的产品')
	}else{
		location.href="/order/confirm/?ids="+ids.join(',')
	}

});


</script>
{% endblock %}